<!-- 页面：自定义导航栏组件 | 时间：2025-01-12 -->
<template>
  <view class="custom-nav-bar" :style="navBarStyle">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏内容 -->
    <view class="nav-content" :style="navContentStyle">
      <!-- 左侧 -->
      <view class="nav-left" @click="handleLeftClick">
        <up-icon
          v-if="showBack"
          customPrefix="iconfont"
          name="arrow-left"
          :size="iconSize"
          :color="iconColor"
        ></up-icon>
        <slot name="left"></slot>
      </view>

      <!-- 中间标题 -->
      <view class="nav-center">
        <text class="nav-title" :style="titleStyle">{{ title }}</text>
        <slot name="center"></slot>
      </view>

      <!-- 右侧 -->
      <view class="nav-right" @click="handleRightClick">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { getStatusBarHeight } from "@/utils/system";

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: "",
  },
  // 背景色
  backgroundColor: {
    type: String,
    default: "#ffffff",
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: "#333333",
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: "#333333",
  },
  // 图标大小
  iconSize: {
    type: [String, Number],
    default: "20",
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true,
  },
  // 导航栏高度（不包含状态栏）
  navHeight: {
    type: [String, Number],
    default: 44,
  },
  // 是否固定定位
  fixed: {
    type: Boolean,
    default: false,
  },
  // 层级
  zIndex: {
    type: [String, Number],
    default: 999,
  },
  // 是否显示底部边框
  showBorder: {
    type: Boolean,
    default: false,
  },
  // 边框颜色
  borderColor: {
    type: String,
    default: "#e5e5e5",
  },
});

const emit = defineEmits(["leftClick", "rightClick"]);

// 状态栏高度
const statusBarHeight = getStatusBarHeight();

// 导航栏样式
const navBarStyle = computed(() => ({
  backgroundColor: props.backgroundColor,
  position: props.fixed ? "fixed" : "relative",
  top: props.fixed ? "0" : "auto",
  left: props.fixed ? "0" : "auto",
  right: props.fixed ? "0" : "auto",
  zIndex: props.zIndex,
  borderBottom: props.showBorder ? `1px solid ${props.borderColor}` : "none",
}));

// 导航栏内容样式
const navContentStyle = computed(() => ({
  height: props.navHeight + "px",
  paddingLeft: "16px",
  paddingRight: "16px",
}));

// 标题样式
const titleStyle = computed(() => ({
  color: props.titleColor,
  fontSize: "18px",
  fontWeight: "500",
}));

// 左侧点击事件
const handleLeftClick = () => {
  if (props.showBack) {
    uni.navigateBack();
  }
  emit("leftClick");
};

// 右侧点击事件
const handleRightClick = () => {
  emit("rightClick");
};
</script>

<style scoped lang="scss">
.custom-nav-bar {
  width: 100%;
  box-sizing: border-box;
}

.status-bar {
  width: 100%;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.nav-left {
  display: flex;
  align-items: center;
  min-width: 60rpx;
  height: 100%;
}

.nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.nav-title {
  text-align: center;
  line-height: 1;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 60rpx;
  height: 100%;
}
</style>
